<template>
  <section class="top-title-box">
    <div class="time-box" :style="{ marginTop: showInfo.handlePyLenth + 'px' }">
      <p class="time-item">{{ monthTime }}</p>
      <p class="time-item">{{ weekDay }}</p>
      <img
        v-if="showInfo.showWeather"
        src="/src/assets/imgs/topTitle/weather.png"
        alt="天气"
        class="top-handle"
        @click="topHandle('weather')"
      />
    </div>
    <p class="title" :style="{ marginLeft: showInfo.titlePyLegth + 'px' }">{{ showInfo.title }}</p>
    <div class="user-box" :style="{ marginTop: showInfo.handlePyLenth + 'px' }">
      <img
        v-if="showInfo.showBackFont"
        src="/src/assets/imgs/topTitle/backFont.png"
        alt="返回上一页"
        class="top-handle"
        @click="topHandle('backFont')"
      />
      <img
        v-if="showInfo.showBackHome"
        src="/src/assets/imgs/topTitle/backHome.png"
        alt="返回首页"
        class="top-handle"
        @click="topHandle('backHome')"
      />
      <img
        v-if="showInfo.showBackLogin"
        src="/src/assets/imgs/topTitle/backLogin.png"
        alt="重新登录"
        class="top-handle"
        @click="topHandle('backLogin')"
      />
    </div>
  </section>
</template>

<script setup>
import { onMounted, ref } from 'vue'

const monthTime = ref(null) // 时间展示
const weekDay = ref(null) // 周展示

// prop接受父组件参数
const prop = defineProps({
  showInfo: Object //
})

// 定义 emit callback ，方法为：操作天气、返回上一页、返回首页、返回登录
const emit = defineEmits(['handleWeather', 'handleFont', 'handleHome', 'handleLogin'])

// 格式化日期
const formatTime = () => {
  let date = new Date()
  let year = date.getFullYear() //获取完整的年份(4位)
  let month = date.getMonth() + 1 //获取当前月份(0-11,0代表1月)
  let strDate = date.getDate() // 获取当前日(1-31)
  if (month < 10) month = `0${month}` // 如果月份是个位数，在前面补0
  if (strDate < 10) strDate = `0${strDate}` // 如果日是个位数，在前面补0
  let weeDay = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
  weekDay.value = weeDay[date.getDay()]
  return `${year}-${month}-${strDate}`
}

// 头部操作方法
const topHandle = (type) => {
  switch (type) {
    case 'weather': // 操作天气
      emit('handleWeather')
      break
    case 'backFont': // 返回上一页
      emit('handleFont')
      break
    case 'backHome': // 返回首页
      emit('handleHome')
      break
    case 'backLogin': // 返回登陆
      emit('handleLogin')
      break
    default:
      break
  }
}

//生命周期函数
onMounted(() => {
  monthTime.value = formatTime()
})
</script>

<style scoped lang="less">
// 头部盒子
.top-title-box {
  .D_J_A(center, center);
  .width_height(100%, 100px);
  .D_J(space-between);
  padding: 0 20px;
  background-image: url('/src/assets/imgs/topTitle/topTitle.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 90%;

  // 时间盒子
  .time-box {
    .width_height(auto, 30px);
    .D_J_A(center, center);
    font-size: 18px;
    font-family: 'AlibabaPuHui-regular';
    color: #ffffff;
    .time-item {
      padding: 0 6px;
    }
  }

  // 标题
  .title {
    .D_J_A(center, center);
    font-family: '微软雅黑 Bold, 微软雅黑 Regular, 微软雅黑-bold';
    font-size: 40px;
    color: #ffffff;
    margin-top: -8px;
    font-weight: 900;
  }

  // 用户信息
  .user-box {
    .width_height(auto, 30px);
    .D_J_A(center, center);
  }

  .top-handle {
    .width_height(30px, 30px);
  }
  .top-handle:hover {
    cursor: pointer;
  }
}
</style>
